<script setup lang="ts">
import type { IMetaWarehouse } from '@/api/interface/rescue/meta/metaWarehouse'
import { computed, reactive, ref } from 'vue'

const props = defineProps<{
  warehouse: IMetaWarehouse.Row | null
}>()

const emit = defineEmits<{
  submit: [formData: IMetaWarehouse.CreateForm | IMetaWarehouse.UpdateForm]
  cancel: []
}>()

const formRef = ref()

// 判断是否为编辑模式
const isEdit = computed(() => !!props.warehouse)

// 表单数据
const formData = reactive<IMetaWarehouse.CreateForm | IMetaWarehouse.UpdateForm>({
  id: props.warehouse?.id || 0,
  name: props.warehouse?.name || '',
  address: props.warehouse?.address || '',
  detailAddress: props.warehouse?.detailAddress || '',
  location: props.warehouse?.location || '',
  longitude: props.warehouse?.longitude || '',
  latitude: props.warehouse?.latitude || '',
  enable: props.warehouse?.enable ?? true,
  common: props.warehouse?.common ?? false,
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
  detailAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
}

// 关闭弹窗
function handleClose() {
  emit('cancel')
}

// 提交表单
async function handleSubmit() {
  try {
    await formRef.value.validate()

    const submitData = { ...formData }

    // 清理空值
    Object.keys(submitData).forEach((key) => {
      if (submitData[key] === '' || submitData[key] === null || submitData[key] === undefined) {
        delete submitData[key]
      }
    })

    emit('submit', submitData)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<template>
  <view class="warehouse-form">
    <!-- 头部 -->
    <view class="form-header">
      <view class="header-left">
        <wd-icon name="edit" size="18px" color="#007AFF" />
        <text class="form-title">
          {{ isEdit ? '编辑仓库' : '新增仓库' }}
        </text>
      </view>
      <view class="header-right">
        <wd-button type="text" class="close-btn" @click="handleClose">
          <wd-icon name="close" size="18px" color="#8E8E93" />
        </wd-button>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="form-content">
      <wd-form ref="formRef" :model="formData" :rules="rules" label-width="70px">
        <!-- 基本信息 -->
        <view class="form-section">
          <view class="section-title">
            <wd-icon name="info" size="14px" color="#007AFF" />
            <text>基本信息</text>
          </view>
          <view class="section-content">
            <wd-form-item label="仓库名称" prop="name">
              <wd-input v-model="formData.name" placeholder="请输入仓库名称" clearable />
            </wd-form-item>
            <wd-form-item label="仓库地址" prop="address">
              <wd-input v-model="formData.address" placeholder="请输入仓库地址" clearable />
            </wd-form-item>
            <wd-form-item label="详细地址" prop="detailAddress">
              <wd-input v-model="formData.detailAddress" placeholder="请输入详细地址" clearable />
            </wd-form-item>
          </view>
        </view>

        <!-- 状态设置 -->
        <view class="form-section">
          <view class="section-title">
            <wd-icon name="setting" size="14px" color="#FF9500" />
            <text>状态设置</text>
          </view>
          <view class="section-content">
            <view class="switch-row">
              <view class="switch-item">
                <text class="switch-label">仓库状态</text>
                <wd-switch v-model="formData.enable" />
                <text class="switch-text">
                  {{ formData.enable ? '启用' : '禁用' }}
                </text>
              </view>
              <view class="switch-item">
                <text class="switch-label">仓库类型</text>
                <wd-switch v-model="formData.common" />
                <text class="switch-text">
                  {{ formData.common ? '公共仓库' : '私有仓库' }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </wd-form>
    </view>

    <!-- 底部操作 -->
    <view class="form-footer">
      <wd-button class="cancel-button" @click="handleClose">
        <wd-icon name="close" size="14px" />
        <text>取消</text>
      </wd-button>
      <wd-button type="primary" class="submit-button" @click="handleSubmit">
        <wd-icon name="check" size="14px" />
        <text>{{ isEdit ? '更新' : '创建' }}</text>
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
/* Apple 设计系统变量 */
:root {
  --apple-blue: #007aff;
  --apple-green: #34c759;
  --apple-orange: #ff9500;
  --apple-red: #ff3b30;
  --apple-gray: #8e8e93;
  --apple-gray-light: #c7c7cc;
  --apple-gray-dark: #48484a;
  --apple-background: #f2f2f7;
  --apple-surface: #ffffff;
  --apple-radius: 12px;
  --apple-radius-small: 8px;
  --apple-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --apple-shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.warehouse-form {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--apple-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.form-header {
  background: var(--apple-surface);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid var(--apple-gray-light);
  box-shadow: var(--apple-shadow);
  flex-shrink: 0;

  .header-left {
    display: flex;
    align-items: center;
    gap: 8px;

    .form-title {
      font-size: 16px;
      font-weight: 600;
      color: #1d1d1f;
      line-height: 1.4;
    }
  }

  .header-right {
    .close-btn {
      padding: 6px;
      border-radius: 6px;
      transition: all 0.2s ease;

      &:active {
        background: rgba(142, 142, 147, 0.1);
        transform: scale(0.95);
      }
    }
  }
}

.form-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-section {
  background: var(--apple-surface);
  border-radius: var(--apple-radius);
  border: 0.5px solid var(--apple-gray-light);
  overflow: hidden;
  box-shadow: var(--apple-shadow);

  .section-title {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(52, 199, 89, 0.03) 100%);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 0.5px solid var(--apple-gray-light);

    text {
      font-size: 13px;
      font-weight: 600;
      color: #1d1d1f;
    }
  }

  .section-content {
    padding: 8px 12px;
  }

  .switch-row {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .switch-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 0.5px solid rgba(142, 142, 147, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .switch-label {
        font-size: 12px;
        color: var(--apple-gray-dark);
        font-weight: 500;
        flex: 1;
      }

      .switch-text {
        font-size: 11px;
        color: var(--apple-gray);
        margin-left: 8px;
        min-width: 50px;
        text-align: right;
      }
    }
  }
}

.form-footer {
  background: var(--apple-surface);
  padding: 12px 16px;
  border-top: 0.5px solid var(--apple-gray-light);
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-shrink: 0;

  .cancel-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(142, 142, 147, 0.1) 0%, rgba(199, 199, 204, 0.1) 100%);
    border: 2px solid rgba(142, 142, 147, 0.2);
    border-radius: var(--apple-radius);
    color: var(--apple-gray);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
      background: linear-gradient(
        135deg,
        rgba(142, 142, 147, 0.2) 0%,
        rgba(199, 199, 204, 0.2) 100%
      );
    }
  }

  .submit-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--apple-blue) 0%, #5ac8fa 100%);
    border: none;
    border-radius: var(--apple-radius);
    color: white;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);

    &:active {
      transform: scale(0.95);
      box-shadow: 0 1px 4px rgba(0, 122, 255, 0.4);
    }
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .warehouse-form {
    background: #1c1c1e;
  }

  .form-header {
    background: #2c2c2e;
    border-bottom-color: #3a3a3c;

    .header-left {
      .form-title {
        color: #ffffff;
      }
    }
  }

  .form-section {
    background: #2c2c2e;
    border-color: #3a3a3c;

    .section-title {
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(52, 199, 89, 0.1) 100%);
      border-bottom-color: #3a3a3c;

      text {
        color: #ffffff;
      }
    }

    .switch-row {
      .switch-item {
        border-bottom-color: rgba(255, 255, 255, 0.1);

        .switch-label {
          color: rgba(255, 255, 255, 0.6);
        }

        .switch-text {
          color: rgba(255, 255, 255, 0.4);
        }
      }
    }
  }

  .form-footer {
    background: #2c2c2e;
    border-top-color: #3a3a3c;
  }
}

/* 响应式设计 */
@media screen and (max-width: 750px) {
  .form-header {
    padding: 10px 12px;

    .header-left {
      .form-title {
        font-size: 14px;
      }
    }
  }

  .form-content {
    padding: 8px;
    gap: 8px;
  }

  .form-section {
    .section-title {
      padding: 6px 10px;

      text {
        font-size: 12px;
      }
    }

    .section-content {
      padding: 6px 10px;
    }

    .switch-row {
      gap: 6px;

      .switch-item {
        padding: 4px 0;

        .switch-label {
          font-size: 11px;
        }

        .switch-text {
          font-size: 10px;
        }
      }
    }
  }

  .form-footer {
    padding: 10px 12px;
    flex-direction: column;

    .cancel-button,
    .submit-button {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
}

/* 移除动画效果，因为组件现在在弹窗内部 */
</style>
